<!-- 数据集卡片 -->
<template>
  <div class="box" :class="[data?.createType === 1 && 'shared']" @click.stop="handleBox">
    <div class="box-example"></div>
    <div class="head">
      <div class="head-up">
        <div class="left-title">
          <div class="title-icon"><i class="iconfont icon-a-bg-model21"> </i></div>
          <span class="elliptical-1 title-text" :title="data?.name">{{ data?.name }}</span>
        </div>
        <div class="head-right">
          <a-dropdown placement="bottom" :trigger="['hover']">
            <a-button v-if="checkPermissions(data?.createType, data?.readOnly)" type="text" class="icon-only-btn" @click.stop>
              <i class="iconfont icon-more-2-fill"></i>
            </a-button>
            <template #overlay>
              <a-menu>
                <a-menu-item class="menu-icon-item" @click.stop="deleteTag(data)"> 删除 </a-menu-item>
                <a-menu-item class="menu-icon-item" @click.stop="openEditModal(data)"> 重命名 </a-menu-item>
                <a-menu-item class="menu-icon-item" @click.stop="handleOpenShareModal(data)"> 分享 </a-menu-item>
              </a-menu>
            </template>
          </a-dropdown>
        </div>
      </div>
      <div class="item-footer">
        <span class="creation-time">创建时间</span><span>{{ data?.createTime }}</span>
      </div>
    </div>
    <div class="bottom">
      <div class="bottom-double-box">
        <div class="info">
          <div class="elliptical-1">
            <span class="bottom-text label">大小</span>
            <span class="elliptical-1 value" :title="`大小:${sizeFilter(data?.size || 0)}`">
              {{ sizeFilter(data?.size || 0) }}
            </span>
          </div>
          <div class="elliptical-1">
            <span class="bottom-text label">文件数</span>
            <span class="elliptical-1 value" :title="`文件数:${data?.fileNum}`">{{ data?.fileNum }}</span>
          </div>
        </div>
        <div class="tool fc gap-6" @click.stop="handleToDownload(data)">
          <i class="iconfont icon-download-2-line"></i>
          下载
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { message } from 'ant-design-vue'
  import { debounce, sizeFilter } from 'g6-fn'

  import manualMessage from '@/components/ManualMessage'
  import { fetchDownload, modelLibraryApi } from '@/services/api'
  import { waitLoading } from '@/utils'
  import { checkPermissions } from '@/utils/share'

  export interface DataType {
    createTime: string
    fileNum: number | 0
    id: string
    name: string
    size: number | 0
    createType?: number // 创建类型
    readOnly?: number // 数据权限 0只读 1读写
  }
  interface Props {
    data: DataType
  }

  withDefaults(defineProps<Props>(), {
    data: () => {
      return {
        createTime: '',
        fileNum: 0,
        id: '',
        name: '',
        size: 0,
        createType: 0,
        readOnly: 0
      }
    }
  })
  const emits = defineEmits<{
    (e: 'onClick', params?: any): void
    (e: 'clickList', params: any): void
    (e: 'share', params: any): void
  }>()

  const deleteTag = (item: DataType) => {
    emits('clickList', { ...item, title: '确认删除', okBtn: '删除' })
  }
  const openEditModal = (item: DataType) => {
    emits('clickList', { ...item, title: '重命名', okBtn: '确定' })
  }

  const handleBox = () => {
    emits('onClick')
  }

  const handleOpenShareModal = (item: DataType) => {
    emits('share', item)
  }

  //下载
  const handleToDownload = debounce(async (item: DataType): Promise<void> => {
    const res = await waitLoading<ResponseData<string>>(
      modelLibraryApi.myModelDownload(
        { id: item.id },
        {
          timeout: 300000 //设置超时时长5min
        }
      ),
      {
        loadingText: '数据准备中,请耐心等待...',
        errorText: '文件下载失败'
      }
    )

    if (!res) {
      return
    }

    const data = res.data

    try {
      fetchDownload(data, `${item.name}.zip`)
    } catch (error) {
      manualMessage.destroy()
      message.error({ content: '文件下载失败', key: 'downloading', duration: 2 })
    }
  }, 500)
</script>

<style lang="less" scoped>
  .box {
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: #fff;
    border: 1px solid @border1;
    border-bottom: none;
    border-radius: 10px;
    transition: all 0.2s;
    flex-direction: column;
    cursor: pointer;

    .box-example {
      position: absolute;
      top: 20px;
      left: 0;
      width: 3px;
      height: 22.957px;
      background: @primary1;
      border-top-right-radius: 4px;
      border-bottom-right-radius: 4px;
    }

    .head {
      padding: 20px 24px;
      width: 100%;
      border-bottom: 1px solid rgba(0, 0, 0, 0.05);

      .head-up {
        display: flex;
        justify-content: space-between;
        align-items: center;
        align-self: stretch;
        gap: 0 8px;
        margin-bottom: 12px;

        .left-title {
          display: flex;
          align-items: center;
          min-width: 0;
          height: 24px;
          gap: 8px;

          .title-icon {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 20px;
            height: 20px;
            background: #f5f5f5;
            border-radius: 50%;

            .iconfont {
              font-size: 10px;
              color: @primary1;
            }
          }

          .title-text {
            max-width: 100%;
            font-size: 16px;
            color: rgba(0, 0, 0, 0.75);
            line-height: 24px; /* 150% */
          }
        }
      }

      .item-footer {
        margin-top: 12px;
        font-size: 12px;
        line-height: 20px;
        color: rgba(25, 25, 48, 0.75);

        .creation-time {
          margin-right: 8px;
          color: rgba(25, 25, 48, 0.45);
        }
      }
    }

    .bottom {
      overflow: hidden;
      width: 100%;
      height: 50px;

      .bottom-double-box {
        width: 100%;
        height: 100px;
        transform: translateY(0);
        transition: transform 0.2s;

        .info {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 0 20px;
          height: 50px;
          align-self: stretch;

          & > div {
            display: flex;
            align-items: center;
            gap: 4px;

            .label {
              font-size: 14px;
              font-family: 'Noto Sans SC';
              color: rgba(0, 0, 0, 0.45);
              font-weight: 400;
              font-style: normal;
              line-height: 22px; /* 157.143% */
            }

            .value {
              color: rgba(0, 0, 0, 0.75);
              font-weight: 700;
            }
          }
        }

        .tool {
          height: 50px;
          color: #fff;
          background: @primary1;
          border-top: 0.5px solid @border1;
        }
      }
    }

    &:hover {
      box-shadow: 0 2px 16px 0 rgba(24, 104, 233, 0.12);

      .head {
        .head-up {
          .left-title {
            .title-text {
              color: @primary1;
              font-weight: 700;
            }
          }
        }
      }

      .bottom {
        .bottom-double-box {
          transform: translateY(-50%);
        }
      }
    }

    // 被分享的数据集
    &.shared {
      .box-example {
        background: @warning;
      }

      .head {
        .head-up {
          .left-title {
            .title-icon {
              .iconfont {
                color: @warning;
              }
            }
          }
        }
      }

      &:hover {
        .head {
          .head-up {
            .left-title {
              .title-text {
                color: @warning;
                font-weight: 700;
              }
            }
          }
        }
      }
    }
  }
</style>
